@extends('admin.base')

@section('content')
    <style>
        .img_box {
            position: relative;
            width: 100px;
            margin-right: 10px;
            float:left;
        }

        .img_del, .img_main_del {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            width: 18px;
            height: 18px;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-radius: 50%;
            background: #333333;
            opacity: .5;
            color: #ffffff;
        }

        .img_del:hover {
            opacity: 1;
        }
        .uploadedimg{
            position: absolute;
            right:0;
            bottom:0;
            width: 100%;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            background: #333333;
            opacity: .5;
            color: #ffffff;
        }

        .layui-card-header {
            margin-top: -11px;
            margin-right: 15px;
            font-size: 28px;
            background-color: #fff;
            color: #1a2226;
        }
        .layui-table-view {
            width: -webkit-fill-available;
        }
        html {
            background-color: white;
        }
    </style>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">月&nbsp&nbsp&nbsp&nbsp度</label>
                <div class="layui-inline" id="test-range" style="width: 100px">
                    <div class="layui-input-inline">
                        <input type="text" name="year" id="startDate" class="layui-input" placeholder="日期" value="{{$renter->year}}" style="width: 100px">
                    </div>
                </div>
                <div class="layui-inline" style="width: 16%">
                    <select name="month" class="layui-input">
                        @foreach($renter->months as $val)
                            <option @if($renter->month==$val) selected @endif value="{{$val}}">{{(int)$val}}月</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">站&nbsp&nbsp&nbsp&nbsp点</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="{{ $renter->name ?? old('name') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">场租费</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="{{ $renter->renter_fee ?? old('renter_fee') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">物业费</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="{{ $renter->property_fee ?? old('property_fee') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">水&nbsp&nbsp&nbsp&nbsp费</label>
                <div class="layui-input-inline">
                    <input type="text" name="water_fee" id="water_fee" value="{{ $renter->water_fee ?? old('water_fee') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电&nbsp&nbsp&nbsp&nbsp费</label>
                <div class="layui-input-inline">
                    <input type="text" name="electric_fee" id="electric_fee" value="{{ $renter->electric_fee ?? old('electric_fee') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">公关费</label>
                <div class="layui-input-inline">
                    <input type="text" name="public_relations_fee" id="public_relations_fee" value="{{ $renter->public_relations_fee ?? old('public_relations_fee') }}" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-inline">
                    <textarea name="remarks" placeholder="" class="layui-input" style="height: 100px;border: 1px solid #ccc;">{{$renter->remarks??old('remarks')}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline" style="width:100%;">
                    <label class="layui-form-label">凭证</label>
                    <div class="layui-input-inline "  style="width:70%;">
                        <div class="imgboxhtml" style="width: auto;">
                            @php
                                $img_url = "";
                                if (!empty($renter->images_url))
                                {
                                    $arra = explode(",", $renter->images_url);
                                    foreach ($arra as $k => $v){
                                        echo '<div class="img_box">';
                                        echo '<img layer-pid="" class="img_item" id="img_url'.$k.'" title="点击预览图片" layer-src="'.$v.'" src="'.$v.'" width="100px">';
                                        echo '<span class="img_del" title="点击删除图片" data-id="'.$k.'" data-type="'.$k.'">X</span>';
                                        echo '</div>';
                                    }
                                    $img_url = $renter->images_url;
                                }
                            @endphp
                        </div>
                        @php
                            echo '<input type="hidden" name="images_url" class="layui-input" id="img_url" lay-verify="img_url" value="'.$img_url.'" />';
                            echo '<a class="layui-btn layui-btn-sm "  id="uploadImgbnt" >上传票据</a>';
                        @endphp
                    </div>
                </div>
            </div>
        </form>
@endsection
@section('script')
<script>
    var contract_id =  @php echo $renter->contract_id;@endphp;
    layui.use(['upload', 'form', 'laydate'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form
            , laydate = layui.laydate;
        //---------------上传图---------------------
        upload.render({
            elem: "#uploadImgbnt"
            , url: '{{ route("api.upload") }}'
            , multiple: true
            , data: {"_token": "{{ csrf_token() }}"}
            , done: function (res) {
                //如果上传失败
                if (res.code == 0) {
                    var img_url = $("#img_url").val();
                    if (img_url !== "") {
                        $("#img_url").val(img_url + "," + res.url);
                    }else{
                        $("#img_url").val( res.url);
                    }
                    var len = $(".img_box").length;
                    var html = '<div class="img_box">';
                    html += '<img layer-pid="" class="img_item" id="img_url'+len+'" title="点击预览图片" layer-src="'+res.url+'" src="'+res.url+'" width="100px">';
                    html += '<span class="img_del" title="点击删除图片" data-id="'+len+'" data-type="'+len+'">X</span>';
                    html += '</div>';
                    $(".imgboxhtml").append(html);
                    layer.msg(res.msg);
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });

        $('.layui-input-inline').on('click','.img_del',function () {
            let id = $(this).data('id');
            layer.confirm('确定删除吗？', {
                btn: ['确认','取消'] //按钮
            }, function(index){
                layer.close(index);
                var valarra = $("#img_url").val().split(",");
                var delvalue = $("#img_url"+id).attr("src");
                var newarra = [];
                var len = valarra.length;
                for (let i = 0;i < len; i++) {
                    if (valarra[i] != delvalue) {
                        newarra.push(valarra[i]);
                    }
                }
                $("#img_url").val(newarra.join(","));
                $("#img_url"+id).parent(".img_box").remove();
            }, function(){
                console.log('取消');
            });
        });

        $('.layui-input-inline').on('click','.img_item',function () {
            let elems = $(this).parent().parent();
            let thisSrc = $(this).attr('src');
            let json = {
                "title": "图片预览",
                "id": 1,
                "start": 0,
                "data": []
            }
            let srcArr = [],index = 0;
            elems.find('img').each(function (idx, elem) {
                let src = $(elem).attr('src');
                if(src == thisSrc){
                    index = idx
                }
                let item = {
                    "alt": "第"+(idx+1)+"张",
                    "pid": idx, //图片id
                    "src": src, //原图地址
                    "thumb": src //缩略图地址
                }
                srcArr.push(item)
            })
            json.start = index;
            json.data = srcArr;
            layer.photos({
                photos: json
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });

        //日期插件
        laydate.render({
            elem: '#startDate', //指定元素
            type: 'year',
            done: function (value) {
                layui.$.ajax({
                    url: '/admin/renter/months?contract_id=' + contract_id + '&year=' + value,
                    type: 'GET',
                    success: function (res) {
                        if (res.code == 0) {
                            let html = '';
                            for (var i in res.data) {
                                html += '<option value="' + res.data[i] + '">' + res.data[i] + '月</option>';
                            }
                            $('select[name="month"]').html(html);
                            form.render('select');
                        } else {
                            layer.msg(
                                res.msg, {icon: 5},
                            )
                        }
                    }
                })
            }
        });
    });
</script>
@endsection

